<template>
  <div>使用前：请先阅读 README.md 文件</div>
  <div class="app-container">
    <upload-excel-component :title="'问卷星答卷'" :on-success="handleSuccess" :before-upload="beforeUpload" />
    <upload-excel-component :title="'所有学生姓名表'" :on-success="allNameHandleSuccess" :before-upload="beforeUpload" />
    <!-- <el-button v-if="defaultList.length > 0" @click="excelBtnFn">导出下面表格为&lt;02_学生开通账号表格&gt;</el-button>
    <el-button v-if="defaultList.length > 0" @click="excelBtn2Fn">单独导出&lt;03_学生角色信息表&gt;</el-button> -->
    <!-- 展示读取的表格数据的 -->
    <el-tabs v-if="defaultList.length > 0" v-model="activeName" class="demo-tabs">
      <el-tab-pane :label="`问卷详情${defaultList.length}`" name="first">
        <el-table :data="defaultList" border highlight-current-row style="width: 100%; margin-top: 20px">
          <el-table-column sortable v-for="item of tableHeader" :key="item" :prop="item" :label="item"
            :formatter="formatterFn">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="`出现 D 项的学生名单${filterList.length}`" name="second">
        <el-table height="650" :data="filterList" border highlight-current-row style="width: 100%; margin-top: 20px">
          <el-table-column sortable v-for="item of tableHeader" :key="item" :label="item" :prop="item">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <!-- 正常题目 4 个选项 -->
                <span v-if="scope.column.no >= 1 && scope.column.no <= 8"
                  :style="{ color: scope.row[item] === 4 ? 'red' : 'black' }">{{ formatterFn(scope.row, scope.column)
                  }}</span>
                <!-- 面试题准备情况 -->
                <span v-if="scope.column.no === 9" :style="{ color: scope.row[item] === 5 ? 'red' : 'black' }">{{
                  formatterFn(scope.row, scope.column) }}</span>
                <!-- 其他选项正常显示值 -->
                <span v-if="scope.column.no === 0 || scope.column.no === 10">{{ scope.row[item] }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="`未提交学生名单${unAnwserList.length}`" name="third">
        <ul>
          <li v-for="item, index in unAnwserList" :key="index">{{ item['姓名'] }}</li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
// 导入src/components下, excel 上传组件
import UploadExcelComponent from '@/components/uploadExcel.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import * as global from './constant';

const tableHeader = ref([]) // 表格头部数据
const defaultList = ref([]) // 问卷星默认数据
const filterList = ref([]) // 筛选以后得数据（有 D 项出现的学生）
const allStudentList = ref([]) // 所有学生名单
const unAnwserList = ref([]) // 没有做问卷的姓名列表
const activeName = ref('') // 激活的 tab 项的名字

// 在上传excel文件后, 做一个判断(小于10MB文件)
const beforeUpload = (file) => {
  // file->上传的文件对象(excel文件对象) -> size的单位是Byte
  // 知识点: 1Byte(字节)计算机里保存一个字母/数字需要的二进制位个数  (1Byte = 8bit)
  // 1KB = 1024B(字节)
  // 1MB = 1024KB
  const isLt10M = file.size / 1024 / 1024 < global.isLimit

  if (isLt10M) {
    return true // 通过
  }

  ElMessage({
    message: `excel文件要小于${global.isLimit}MB`,
    type: 'warning'
  }) // 不通过返回false, 并提示
  return false
}

// 接收问卷星表格数据
const handleSuccess = (resultObj) => {
  // 读取的表格头放置到页面表格头（只保留开头带序号的这些选项-需要用户填写的）
  tableHeader.value = resultObj.header.filter(str => {
    if (/^\d/.test(str)) {
      return str
    }
  })
  // 读取的表格内容放置到页面表格内
  defaultList.value = resultObj.results
  // 筛选出现 D 项的学生名单
  filterList.value = resultObj.results.filter(obj => {
    for (let key in obj) {
      if (/^\d/.test(key)) {
        if (obj[key] >= 4) {
          return true
        }
      }
    }
  })

  activeName.value = 'first'
}

// 所有学生姓名名单
const allNameHandleSuccess = (resultObj) => {
  allStudentList.value = resultObj.results
  // 查看未上交的学生
  unAnwserList.value = allStudentList.value.filter(dataObj => {
    const find = defaultList.value.find(obj => {
      return obj[global.nameHeaderStr] === dataObj[global.allStudentStr]
    })
    if (!find) return dataObj
  })
}

// 格式化列内容
const formatterFn = (row, column) => {
  // 查找当前列的索引序号是否在格式化数组对象中
  const format = global.formatColumnNo.find(obj => obj.no === column.no)
  if (format) {
    return format.value[row[column.property]]
  } else {
    // 其他原封不动返回值
    return row[column.property]
  }
}

// 导出表格
// const excelBtnFn = () => {
//   import('@/vendor/Export2Excel').then(excel => {
//     const tHeader = ['account', 'realname', 'gender', 'role', 'commiter', 'password']

//     // 遍历每个英文key的对象
//     const data = this.tableData.map((enObj) => {
//       const newArr = [] // 保存每行值
//       tHeader.forEach(enKey => {
//         newArr.push(enObj[enKey])
//       })
//       // 把一行值数组return给map内
//       return newArr
//     })

//     // export_json_to_excel()方法是vendor/Export2Excel.js文件内封装的导出excel文件的方法
//     excel.export_json_to_excel({
//       // 表格文件的列标题(数组)
//       header: tHeader,
//       // 表格里第二行开始的正文数据(二维数组)
//       // 其中内层数组里直接写行的内容值
//       data,
//       // 导出时excel文件的名字(无需写后缀)
//       filename: '02_学生开通账号表格',
//       // 单元格的宽度自适应
//       autoWidth: true,
//       // 文件类型
//       bookType: 'csv'
//     })
//   })
// }
// // 导出角色信息表格
// const excelBtn2Fn = () => {
//   import('@/vendor/Export2Excel').then(excel => {
//     let tHeader = ['account', 'group']
//     // 遍历每个英文key的对象
//     const data = this.tableData.map((enObj) => {
//       const newArr = [] // 保存每行值
//       tHeader.forEach(enKey => {
//         if (enKey === 'group') {
//           // 取出enObj.role的角色的值, 把'pm'转成4, 把'dev'转成2
//           if (enObj['role'] === 'pm') newArr.push(4)
//           else newArr.push(2)
//         } else {
//           newArr.push(enObj[enKey])
//         }
//       })
//       // 把一行值数组return给map内
//       return newArr
//     })

//     // export_json_to_excel()方法是vendor/Export2Excel.js文件内封装的导出excel文件的方法
//     excel.export_json_to_excel({
//       // 表格文件的列标题(数组)
//       header: tHeader,
//       // 表格里第二行开始的正文数据(二维数组)
//       // 其中内层数组里直接写行的内容值
//       data,
//       // 导出时excel文件的名字(无需写后缀)
//       filename: '03_学生角色信息表',
//       // 单元格的宽度自适应
//       autoWidth: true,
//       // 文件类型
//       bookType: 'csv'
//     })
//   })
// }
</script>
